<template>
  <div>
    <div class="line-1">
      <div v-if="pCode" class="item" @click="changeP({name:pName,code:pCode})">{{ pName }} <i class="el-icon-arrow-right" /></div>
      <div v-if="cCode" class="item" @click="changeC({name:cName,code:cCode})">{{ cName }} <i class="el-icon-arrow-right" /></div>
      <div v-if="aCode" class="item" @click="changeA({name:aName,code:aCode})">{{ aName }} <i class="el-icon-arrow-right" /></div>
      <div v-if="sCode" class="item" @click="changeS({name:sName,code:sCode})">{{ sName }}</div>
    </div>
    <el-divider />
    <div class="select-list">
      <!--      市-->
      <template v-if="active === 'city'">
        <div v-for="item in cityList" :key="item.code" class="item" @click="changeC(item)">
          {{ item.name }}
        </div>
      </template>
      <!--      区-->
      <template v-if="active === 'area'">
        <div v-for="item in areaList" :key="item.code" class="item" @click="changeA(item)">
          {{ item.name }}
        </div>
      </template>
      <!--      街道-->
      <template v-if="active === 'street'">
        <div v-for="item in streetList" :key="item.code" class="item" @click="changeS(item)">
          {{ item.name }}
        </div>
      </template>
    </div>
    <el-divider />
    <div class="line-2">
      <div>您选择的是：</div>
      <div v-if="pCode" class="item">{{ pName }} <i class="el-icon-arrow-right" /></div>
      <div v-if="cCode" class="item">{{ cName }} <i class="el-icon-arrow-right" /></div>
      <div v-if="aCode" class="item">{{ aName }} <i class="el-icon-arrow-right" /></div>
      <div v-if="sCode" class="item">{{ sName }}</div>
    </div>
    <div class="btn">
      <div class="btn-item confirm" @click="changeData">
        确定
      </div>
      <div class="btn-item cancel" @click="cancel">
        取消
      </div>
    </div>
  </div>
</template>

<script>
import { getAddress } from '@/api/common'
export default {
  name: 'Index',
  props: {
    value: {
      type: [Object, String],
      default: () => {}
    }
  },
  data() {
    return {
      active: 'city',
      pCode: '33000000',
      pName: '浙江省',
      cCode: '',
      cName: '',
      aCode: '',
      aName: '',
      sCode: '',
      sName: '',
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: []
    }
  },
  mounted() {
    if (this.value) {
      // this.pName = this.value.provinceName
      // this.pCode = this.value.province
      this.cName = this.value.cityName
      this.cCode = this.value.city
      this.aName = this.value.areaName
      this.aCode = this.value.area
      this.sName = this.value.streetName
      this.sCode = this.value.street
    }
    this.getAddress()
  },
  methods: {
    changeActive(val) {
      console.log('类型切换', val)
      this.active = val
    },
    async getAddress() {
      const pData = await getAddress({})
      this.provinceList = pData.data
      if (!this.pCode) return
      const cData = await getAddress({ province: this.pCode })
      console.log('城市', cData)
      this.cityList = cData.data
      if (!this.cCode) return
      const aData = await getAddress({ province: this.pCode, city: this.cCode })
      this.areaList = aData.data
      if (!this.aCode) return
      const sData = await getAddress({ province: this.pCode, city: this.cCode, area: this.aCode })
      this.streetList = sData.data
    },
    changeP(val) {
      console.log('选择了省', val)
      this.pName = val.name
      this.pCode = val.code
      this.cityList = []
      this.areaList = []
      this.streetList = []
      this.cName = ''
      this.cCode = ''
      this.aName = ''
      this.aCode = ''
      this.sName = ''
      this.sCode = ''
      this.active = 'city'
      getAddress({ province: this.pCode }).then(res => {
        console.log('加载结果', res)
        this.cityList = res.data
      })
      this.changeData()
    },
    changeC(val) {
      console.log('选择了市', val)
      this.cName = val.name
      this.cCode = val.code
      this.areaList = []
      this.streetList = []
      this.aName = ''
      this.aCode = ''
      this.sName = ''
      this.sCode = ''
      this.active = 'area'
      getAddress({ province: this.pCode, city: this.cCode }).then(res => {
        this.areaList = res.data
      })
      this.changeData()
    },
    changeA(val) {
      console.log('选择了区', val)
      this.aName = val.name
      this.aCode = val.code
      this.streetList = []
      this.sName = ''
      this.sCode = ''
      this.active = 'street'
      getAddress({ province: this.pCode, city: this.cCode, area: this.aCode }).then(res => {
        this.streetList = res.data
      })
      this.changeData()
    },
    changeS(val) {
      console.log('选择了街道', val)
      this.sName = val.name
      this.sCode = val.code
      this.changeData()
    },
    changeData() {
      const data = {
        province: this.pCode,
        city: this.cCode,
        area: this.aCode,
        street: this.sCode,
        provinceName: this.pName,
        cityName: this.cName,
        areaName: this.aName,
        streetName: this.sName
      }
      console.log('回调数据', data)
      this.$emit('input', data)
    },
    cancel() {
      console.log('取消')
    }
  }
}
</script>

<style lang="scss" scoped>
.line-1{
  display: flex;
  .item{
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    color: rgb(49,108,241);
    font-size: 22px;
    font-weight: bold;
    text-decoration: underline;
    i{
      color: rgb(213,213,213);
    }
  }
}
.select-list{
  display: inline-block;
  .item{
    margin-right: 20px;
    float: left;
    cursor: pointer;
    padding: 10px;
  }
  .item:hover{
    background: #e1e1e1;
  }
}
.line-2{
  display: flex;
  font-size: 16px;
  .item{
    margin-right: 10px;
    i{
      color: rgb(213,213,213);
    }
  }
}
.btn{
  margin-top: 10px;
  display: inline-block;
  .btn-item{
    background: rgb(233,237,247);
    color: rgb(49,108,241);
    float: left;
    min-width: 80px;
    padding: 5px;
    text-align: center;
    margin-right: 10px;
    border-radius: 15px;
    cursor: default;
  }
  .btn-item:hover{
    background: rgba(233, 237, 247, 0.68);
    transition: .2s all;
    color: rgb(19, 86, 238);;
  }
  .confirm{
    color: rgb(233,237,247);
    background: rgb(49,108,241);
  }
  .confirm:hover{
    color: rgb(255,255,255);
    background: rgba(49, 108, 241, 0.71);
  }
}
</style>
